<template>
  <div class="component-box">
    <wei-row gutter="0">
      <wei-col span="0 0 70px" style="border: none">
        <Sidebar @selectItem="selectMenu"></Sidebar>
      </wei-col>
      <wei-col span="0 0 200px">
        <Submenu :menuList="data.menuList" :title="data.menuTitle"></Submenu>
      </wei-col>
      <wei-col :span="1">
        <wei-row direction="column" gutter="0">
          <wei-col span="0 0 110px">
            <Header></Header>
          </wei-col>
          <wei-col span="1"></wei-col>
        </wei-row>
      </wei-col>
    </wei-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

import Sidebar from "../../components/Sidebar/index.vue";
import Submenu from "../../components/Submenu/index.vue";
import Header from "../../components/Header/index.vue";

export default defineComponent({
  name: "HomePage",
  components: {
    Sidebar,
    Submenu,
    Header
  },
  props: {},
  setup() {
    const data = reactive<any>({
      menuList: [],
      menuTitle: ''
    })
    const selectMenu = ( e: any)=> {
      data.menuList = e.list
      data.menuTitle = e.name
    }

    return {
      data,
      selectMenu
    }
  },
});
</script>


<style lang="scss" scoped>
.component-box {
    display: flex;
    height: 100%;

    
    .one {
        width: 80px;
        height: 100%;
    }
    .two {
        width: 200px;
        height: 100%;
    }
    .three {
      width: 100%;
      height: 100%
    }
  
}
</style>